<template>
	<view>
		<u-notice-bar text="感谢你选择杰超陈皮店,有任何问题请咨询13172272921(微信同号)!"></u-notice-bar>
		<view class="paypage">
			<delivery-layout :deliveryInfo="deliveryInfo"></delivery-layout>

			<view class="goodsList">
				<goods-list :goodsList="carsList" :totalPrice="totalPrice" :prePrice="preferentialPrice"></goods-list>
			</view>
			<view class="t">
				注意：下单总金额大于100元，才进行配送，有问题请联系13172272921（微同）！
			</view>


			<!-- #ifndef MP-WEIXIN -->
			<view class="paytype">
				<view class="box" :class="item.value == payDefValue ? 'active':''" v-for="item in payType"
					@click="clickPayBtn(item.value)">
					<u-icon :name="item.icon" :color="item.color" class="icon" size="26"></u-icon>
					<text class="font">{{item.name}}</text>
				</view>
			</view>
			<!-- #endif -->

			<!-- 支付按钮组件 -->
			<view class="payTabbar">
				<car-layout type="pay" :payBtnState="payBtnState" @confirmPay="onConfirmPay"></car-layout>
			</view>

			<!-- 支付组件 -->
			<uni-pay ref="uniPay" returnUrl="/pages/order/order" @success="paySuccess" @cancel="payCancel"
				@create="payCreate"></uni-pay>


		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from "vuex"
	const addressCloudObj = uniCloud.importObject("kt-mall-address");
	// 订单云对象
	const orderCloudObj = uniCloud.importObject("kt-mall-order", {
		customUI: true
	});
	export default {
		data() {
			return {
				deliveryInfo: {
					address: "",
					username: "",
					mobile: ""
				},

				// #ifdef APP-PLUS || H5
				payDefValue: "alipay",
				// #endif

				// #ifdef MP-WEIXIN
				payDefValue: 'wxpay',
				// #endif

				payType: [{
					name: "支付宝",
					value: "alipay",
					color: "#1578FF",
					icon: "zhifubao"
				}, {
					name: "微信",
					value: "wxpay",
					color: "#04C15F",
					icon: "weixin-fill"
				}],

				payLoading: true
			};
		},
		computed: {
			...mapGetters(['carsList', 'totalPrice', 'preferentialPrice']),
			payBtnState() {
				let bool = Object.keys(this.deliveryInfo).every(item => {
					return this.deliveryInfo[item] != ""
				})
				return this.carsList.length > 0 && this.totalPrice > 10000 && bool && this.payLoading
			}
		},
		onLoad() {
			this.getDefAddressData();
			uni.$on("selectAddressEvent", (e) => {
				this.deliveryInfo = e;
			})
		},
		onUnload() {
			uni.$off("selectAddressEvent")
		},

		methods: {
			...mapMutations(["SET_CARS_LIST"]),

			//点击支付按钮发起支付	
			async onConfirmPay() {
				this.payLoading = false;
				// 把订单信息进行数据库存储
				let obj = {
					deliveryInfo: this.deliveryInfo, // 配送信息- 地址-姓名-手机号 
					carsList: this.carsList, //购物车信息
					createTime: Date.now(), //创建订单时间
					payType: this.payDefValue, //支付方式-支付宝还是微信 
					status: 0, //支付状态
					total_fee: this.totalPrice, //支付总价
					done: false, //是否完成支付
					wuliuOrder: '' //物流单号
				}

				let orderObj = await orderCloudObj.createOrder(obj)

				let order_no = orderObj.order_no; //进行拿订单号
				// let out_trade_no = order_no + "_" + String(Math.random()).substring(3, 9) //进行拿插件支付单号（唯一）
				let out_trade_no = orderObj.out_trade_no //进行拿插件支付单号（唯一）

				// 调用支付组件中的方法进行支付
				this.$refs.uniPay.createOrder({
					provider: this.payDefValue, // 支付供应商微信还是支付宝
					total_fee: this.totalPrice, // 支付金额，单位分 100 = 1元
					type: "goods", // 支付回调类型
					order_no, // 业务系统订单号
					out_trade_no, // 插件支付单号
					description: "购买商品的支付", // 支付描述
				})
			},


			//支付成功的回调
			paySuccess(e) {
				this.payLoading = true;
				this.SET_CARS_LIST();
				console.log(e);
			},
			payCancel(e) {
				console.log(e);
			},
			payCreate(e) {
				console.log(e);
			},





			//选择支付类型
			clickPayBtn(value) {
				this.payDefValue = value
			},

			//获取默认地址
			async getDefAddressData() {
				let res = await addressCloudObj.getDefAddress();
				if (!res.data.length) return;
				let {
					address,
					area_name,
					username,
					mobile
				} = res.data[0];
				this.deliveryInfo = {
					address: area_name + address,
					username,
					mobile
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-bg-color;
	}

	.paypage {
		padding: 30rpx;

		.t {
			font-size: 30rpx;
			color: red;
			line-height: 50rpx;
		}

		.goodsList {
			margin-top: 30rpx;
		}

		.paytype {
			@include flex-box();

			.box {
				width: 49%;
				height: 75rpx;
				background: #fff;
				border-radius: 10rpx;
				@include flex-box-set();
				border: 1px solid #fff;
				filter: grayscale(100%);

				.font {
					padding-left: 10rpx;
				}
			}

			.box:first-child.active {
				border-color: #1578FF;
				color: #1578FF;
				filter: grayscale(0%);
			}

			.box:last-child.active {
				border-color: #04C15F;
				color: #04C15F;
				filter: grayscale(0%);
			}
		}

		.payTabbar {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
		}
	}
</style>